<script setup lang="ts">
import { showToast } from 'vant';
import { ref } from 'vue';
const onSubmit = () => showToast('点击按钮');
const value = ref(3);
</script>
<template>
    <div class="order">
        <header>
            <van-icon name="arrow-left" color="#000" size="24" @click="$router.back()" />
            <div class="title">
                观影结束
            </div>
        </header>
        <div class="public">
            <div class="vote">
                <div class="vote-info">
                    <div class="nm">误判</div>
                    <div class="time">粤语2D 2张</div>
                    <div class="cinema">
                        <div style="display: flex;justify-content: space-between;">
                            <span>2024-12-06</span>
                            <span>一号激光厅</span>
                        </div>
                        <div style="display: flex;justify-content: space-between; font-size: 14rem;color: #333;">
                            <span>20：30 - 22：32</span>
                            <span>1排1座 1排2座</span>
                        </div>
                    </div>
                </div>
                <div>
                    <van-image width="50rem" height="80rem" fit="cover" radius="8rem"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>
            </div>
            <div class="vote" style="justify-content: space-between;">
                <div class="service">
                    <span style="margin-right: 4rem;">展开取票码 </span><van-icon name="arrow-down" />
                </div>
            </div>
        </div>
        <div class="public">
            <div class="rate">
                <p>评价电影</p>
            <div style="display: flex;justify-content: space-between;align-items: center;">
                <van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
                <span style="font-size: 12rem; color: #333;">可以拖动星星评分</span>
            </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.order {
    background: linear-gradient(to bottom, #696969, #fff);
    height: 100vh;

    header {
        display: flex;
        align-items: center;
        padding: 12rem 6rem;

        .title {
            width: 90%;
            text-align: center;
            font-size: 14rem;
            font-weight: bold;
        }
    }

    .public {
        width: 94%;
        margin: auto;
        margin-top: 8rem;
        background: #fff;
        border-radius: 12rem;
    }

    .vote {
        padding: 12rem;
        display: flex;
        justify-content: space-between;

        .vote-info {
            margin-left: 8rem;
            font-size: 12rem;
            color: #adadad;
            line-height: 20rem;

            .nm {
                font-size: 18rem;
                color: #000;
                font-weight: 600;
                margin: 8rem 0;
            }

            .time {
                color: #949494;
                font-weight: 600;
                margin-bottom: 12rem;
            }

            .cinema {
                width: 60vw;
            }
        }

        .service {
            display: flex;
            font-size: 12rem;
            align-items: center;
            justify-content: center;
            color: #333;
            width: 100%;
            padding: 12rem 0;
            border-top: 1px dashed #adadad;
        }

        .detail {
            color: #8e8e8e;
            font-size: 12rem;
            margin-right: 12rem;
        }
    }
    .rate{
        padding: 12rem;
        line-height: 40rem;
        p{
            margin: 0;
        }
    }
}
</style>